<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<link rel="stylesheet" href="../../static/assets/css/zpui.css"/>
<link rel="stylesheet" href="../../static/assets/css/all.css"/>
<link rel="stylesheet prefetch" href="../../static/mobile/default/css/default-skin.css">
<link rel="stylesheet prefetch" href="../../static/mobile/default/css/photoswipe.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js"></script>
<script src="../../static/mobile/default/js/photoswipe.js"></script>
<script src="../../static/mobile/default/js/photoswipe-ui-default.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

     <script src="../../static/js/jquery/jquery/2.1.4/jquery.min.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
    <script src="../../static/mobile/default/js/page.js?v=1"></script>
<script src="../../static/mobile/default/js/page.js?v=1"></script>


    <title> 素材号 </title>
    <style>
        .weui-navbar__item.weui-bar__item--on:after {
            width: 40px;
            height: 4px;
            background-color: #f65236;
        }

        .weui-navbar__item.weui-bar__item--on {
            background: transparent;
        }
        .affirm{
            width:40px;
            height:30px;
            float: right;
            position:relative;
            margin-top:-30px;
        }

        .downloadBtn,.shareBtn{
            display: inline-block;
            width: .6rem;
            background-color: #F65236;
            color: white;
            text-align: center;
            line-height: .3rem;
            border-radius: 15px;
            font-size: .16rem;
            margin-top: .1rem;
        }
    </style>
</head>
<body>
<div class="page">
    <div class="page-hd">
        <div class="header bor-1px-b">
    <div class="header-left">
        <a href="javascript:history.go(-1)" class="left-arrow"></a>
    </div>
    <div class="header-title">素材号</div>
    <div class="header-right">
        <a href="#"></a>
    </div>
</div>
    </div>

    <div class="page-bd">
        <!-- 页面内容-->
        <div class="member_top" style="background-image:none;    padding-bottom: 10px;">
            <div class="search-bar" style="display:flex">
                <div style="width:80%">
                    <form action="#">
                    <input type="text" placeholder="请输入素材名称" id="seek" style="height: 0.573333rem;
  line-height: 0.573333rem;
  border-radius: 0.286667rem; border: solid 1px #eeeeee;">
                    </form>
                <div class="affirm" onclick="seek()" style="height: 0.573333rem;
  line-height: 0.573333rem;    margin-top: -45px;"></div>  
                </div>
                
                <div class="selectinput" style="height: 0.573333rem;
  line-height: 0.573333rem;
  border-radius: 0.286667rem;">
                            <input type="text" id='picker' class="weui-input" value="全部"  style="text-indent: 0;background-image:none"/>
                </div>
            </div>

        </div>
        <!-- 容器 -->
        <div class="weui-tab" style="margin-top: -0.2rem;">

            <div class="weui-tab__bd">
                <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
                    <!--<div class="fs24 text-muted mt30 tc">已经到底啦~</div>-->
                </div>
            </div>
        </div>

    </div>

</div>
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

        <div class="pswp__bg"></div>

        <div class="pswp__scroll-wrap">

            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>

            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">

                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var initPhotoSwipeFromDOM = function (gallerySelector) {

            // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
            // (children of gallerySelector)
            var parseThumbnailElements = function (el) {
                var thumbElements = el.childNodes,
                    numNodes = thumbElements.length,
                    items = [],
                    figureEl,
                    linkEl,
                    size,
                    item,
                    divEl;

                for (var i = 0; i < numNodes; i++) {

                    figureEl = thumbElements[i]; // <figure> element

                    // 仅包括元素节点
                    if (figureEl.nodeType !== 1) {
                        continue;
                    }
                    divEl = figureEl.children[0];
                    linkEl = divEl.children[0]; // <a> element

                    size = linkEl.getAttribute('data-size').split('x');

                    // 创建幻灯片对象
                    item = {
                        src: linkEl.getAttribute('href'),
                        w: parseInt(size[0], 10),
                        h: parseInt(size[1], 10)
                    };



                    if (figureEl.children.length > 1) {
                        // <figcaption> content
                        item.title = figureEl.children[1].innerHTML;
                    }

                    if (linkEl.children.length > 0) {
                        // <img> 缩略图节点, 检索缩略图网址
                        item.msrc = linkEl.children[0].getAttribute('src');
                    }

                    item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
                    items.push(item);
                }

                return items;
            };

            // 查找最近的父节点
            var closest = function closest(el, fn) {
                return el && (fn(el) ? el : closest(el.parentNode, fn));
            };

            // 当用户点击缩略图触发
            var onThumbnailsClick = function (e) {
                e = e || window.event;
                e.preventDefault ? e.preventDefault() : e.returnValue = false;

                var eTarget = e.target || e.srcElement;

                // find root element of slide
                var clickedListItem = closest(eTarget, function (el) {
                    return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                });

                if (!clickedListItem) {
                    return;
                }

                // find index of clicked item by looping through all child nodes
                // alternatively, you may define index via data- attribute
                var clickedGallery = clickedListItem.parentNode,
                    childNodes = clickedListItem.parentNode.childNodes,
                    numChildNodes = childNodes.length,
                    nodeIndex = 0,
                    index;

                for (var i = 0; i < numChildNodes; i++) {
                    if (childNodes[i].nodeType !== 1) {
                        continue;
                    }

                    if (childNodes[i] === clickedListItem) {
                        index = nodeIndex;
                        break;
                    }
                    nodeIndex++;
                }



                if (index >= 0) {
                    // open PhotoSwipe if valid index found
                    openPhotoSwipe(index, clickedGallery);
                }
                return false;
            };

            // parse picture index and gallery index from URL (#&pid=1&gid=2)
            var photoswipeParseHash = function () {
                var hash = window.location.hash.substring(1),
                    params = {};

                if (hash.length < 5) {
                    return params;
                }

                var vars = hash.split('&');
                for (var i = 0; i < vars.length; i++) {
                    if (!vars[i]) {
                        continue;
                    }
                    var pair = vars[i].split('=');
                    if (pair.length < 2) {
                        continue;
                    }
                    params[pair[0]] = pair[1];
                }

                if (params.gid) {
                    params.gid = parseInt(params.gid, 10);
                }

                return params;
            };

            var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
                var pswpElement = document.querySelectorAll('.pswp')[0],
                    gallery,
                    options,
                    items;

                items = parseThumbnailElements(galleryElement);

                // 这里可以定义参数
                options = {
                    barsSize: {
                        top: 100,
                        bottom: 100
                    },
                    fullscreenEl: false,
                    shareButtons: [
                        { id: 'wechat', label: '分享微信', url: 'jcgengduo1.html?id=weibo' },
                        { id: 'weibo', label: '新浪微博', url: '#' },
                        { id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true }
                    ],

                    // define gallery index (for URL)
                    galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                    getThumbBoundsFn: function (index) {
                        // See Options -> getThumbBoundsFn section of documentation for more info
                        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                            pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                            rect = thumbnail.getBoundingClientRect();

                        return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
                    }

                };

                // PhotoSwipe opened from URL
                if (fromURL) {
                    if (options.galleryPIDs) {
                        // parse real index when custom PIDs are used 
                        for (var j = 0; j < items.length; j++) {
                            if (items[j].pid == index) {
                                options.index = j;
                                break;
                            }
                        }
                    } else {
                        // in URL indexes start from 1
                        options.index = parseInt(index, 10) - 1;
                    }
                } else {
                    options.index = parseInt(index, 10);
                }

                // exit if index not found
                if (isNaN(options.index)) {
                    return;
                }

                if (disableAnimation) {
                    options.showAnimationDuration = 0;
                }

                // Pass data to PhotoSwipe and initialize it
                gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
            };

            // loop through all gallery elements and bind events
            var galleryElements = document.querySelectorAll(gallerySelector);

            for (var i = 0, l = galleryElements.length; i < l; i++) {
                galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                galleryElements[i].onclick = onThumbnailsClick;
            }

            // Parse URL and open gallery if it contains #&pid=3&gid=1
            var hashData = photoswipeParseHash();
            if (hashData.pid && hashData.gid) {
                openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
            }
        };

        // execute above function
        initPhotoSwipeFromDOM('#imgshow');


        $("#imgshow>figure>div").each(function () {
            $(this).height($(this).width());
        });
    </script>

<script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
<script src="../../static/assets/js/jquery-weui.min.js"></script>
 <script src="../../static/js/jquery/jquery.cookie.js"></script>
<script src="../../static/assets/js/lib/fastclick.js"></script>
<script src="../../static/assets/js/page.js"></script>
<script>
    let html = '';
    let data = "";
    let page = 1;
    let length = 0;
    let time = 1;
    let CategoryID=''
    let CategoryList =[]
    let nickname=''
    let avatar = ''
    let type = ''

	     $.ajax({
                            url: 'https://mp.jianguoes.com/api/mp/getUserInfo',// 跳转到 action
                            data: {},
                            type: 'get',
                            headers:{ token: $.cookie('code')},
                            dataType: 'json',
                            success: function (res) {
                                
                                if (res.errno == 0){
                                        nickname=res.data.nickname
                                         avatar = res.data.avatar
                                             requestAjax({'page':1,
                'size':10,});
                                }

                            }, error: function () {

                            }
                        });

    function downloadEvent(obj){
        console.log($(obj).attr("data"))
        var clipboard = new Clipboard('.downloadBtn', {
            text: function() {
                return $(obj).attr("data");
            }
        });
        clipboard.on('success', function(e) {
            alert("文字信息已粘贴，图片素材请长按图片保存");
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    }

    // 分享
    function shareEvent(){
        alert("请点击右上角里'分享给朋友'按钮");
    }
   
    $(function() {
           $.ajax({
		    url: "/api/mp/selectTopicCategory",
		    type: "get",
		    headers:{ token: $.cookie('code')},
		    dataType: "json",
		    success: function(data){
		        console.log(data)
		        let arr = ['全部']
		        for(var i =0;i<data.data.length;i++){
		            arr.push(data.data[i].title)
		        }
		        
		        CategoryList = data.data
		        $("#picker").picker({
                title: "选择分类",
                cols: [{
                    textAlign: 'center',
                    values: arr,
                }],
                onClose: function() {
                    CategoryID=''
                     for(var i=0;i<CategoryList.length;i++){
             if(CategoryList[i].title ==$('#picker').val()){
                  CategoryID = CategoryList[i].id
                  
             }
         }
                    requestAjax({
                'page':1,
                'size':10,
                'content':$('#seek').val(),
                'topicCategoryId':CategoryID
            })
                }
            });
		    },
		    error: function() {
// 			    _alert('ajax request failed!!!!');
			    return;
		    } 
        })
        
        
        FastClick.attach(document.body);
    
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0;   //滚动到的当前位置
        var nDivHight = $("#tab1").height();
        $("#tab1").scroll(function(){

            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if(nScrollTop + nDivHight >= nScrollHight)
            {
                time = 2;
                if(length < 10){
                    return false;
                }
                data['page'] = page;
                requestAjax({'page':page,'size':10,'content':$('#seek').val(),'topicCategoryId':CategoryID});
            }
        });
    });
    function seek(){
        html = '';
        time = 4
        CategoryID=''
         for(var i=0;i<CategoryList.length;i++){
             if(CategoryList[i].title ==$('#picker').val()){
                  CategoryID = CategoryList[i].id
                  
             }
         }
         page =1
        requestAjax({'page':1,'size':10,'content':$('#seek').val(),'topicCategoryId':CategoryID})}
    function requestAjax(e){
        data = e;
        $.ajax({
            type:"get",
            url:"/api/mp/pageTopic",
            data:data,
            headers: { 'token': $.cookie('code') },
                        dataType: 'json',
            success:function(res){
                console.log(res)
                if(page==1){
                    $('#tab1').html('');
                }
                
                html=''
                for (key in res.data.data) {
                    let pictrueList =  ''
                    let pictrueHtml =''
                    if(res.data.data[key].item_pic_url){
                        pictrueList =  res.data.data[key].item_pic_url.split(',')
                        
                        for(item in pictrueList){
                            pictrueHtml+=`<figure style="width:30%;height: 1.45rem;">
                <div class="img-dv" style="width: 100%; overflow: hidden;    height: 100%;">
                    <a style="position: static;    height: 100%;" id="tupian1" index="1" href="`+pictrueList[item]+`" data-size="680x408"><img
                            style="width: 90%;    height: 90%;" id="ejiao" src="`+pictrueList[item]+`"></a>
                </div></figure>`
                        }
                    }
       
                    html +=    "<a href='./pageTopicDetail.html?id="+res.data.data[key].id+"' class='ahref'>"+
                         "                    <div class=\"weui-cells card-box\" >\n" +
                        "                        <div class=\"weui-cell\"     style=\"align-items: start;\">\n" +
                        "                            <div class=\"weui-cell__hd mr10\">\n" +
                        "                                <img src=\""+avatar+"\" class=\"tximg\">\n" +
                        "                            </div>\n" +
                        "                            <div class=\"weui-cell__bd\">\n" +
                        "                                <div >\n" +
                        "                                    <div class=\"fs26 fw600\">"+nickname+"</div>\n" +
                        "                                    <div class=\"fs26 text-gray\" data='"+res.data.data[key].content+"'>"+res.data.data[key].content+"</div>\n" +
                        "                                </div>\n</a>" +
                        "                                <div class=\" fs26 fw600 mt10  clickAll\" style=\"justify-content: space-between\">\n" +
                        "                                    <div class=\"weui-flex img \"id='imgshow'  style=\"flex-wrap: wrap;\">"+pictrueHtml+"</div>\n" +
                        "                                    <div style=\'text-align:right\'><span class=\'downloadBtn\' data='"+res.data.data[key].content+"' onclick=\'javascript:downloadEvent(this)\'>下载</span><span class=\'shareBtn\' onclick=\'javascript:shareEvent()\' style=\'margin-left:.2rem\'>分享</span></div>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                    </div>"
                }
                length = res.data.data.length;
                if(length < 10){
                    html += "<div class=\"fs24 text-muted mt30 tc\">已经到底啦~</div>";
                }else{
                    page = page + 1;
                }
                if(time == 1) {
                    if (length == 0) {
                        html = "<div class=\"empeyOrder\" style=\"width: 100%;text-align: center;\">\n" +
                            "                <img style=\"width: 100%;\" src=\"/static/mobile/default/images/emptyData.png\" alt=\"\">\n" +
                            "                <span class=\"fs24 text-muted tc mt30\">暂无记录</span>\n" +
                            "            </div>";

                    }
                }
                $('#tab1').append(html);
                
                
                 console.log($('.ahref'))
                                    var array  = Array.prototype.slice.apply($('.ahref'));
                                    if(getUrlParam('PID')==$.cookie('myID')){
                                        for (var i = 0; i < array.length; i++) {
                                        
                                        var url = $('.ahref').eq(i).attr('href')
                                        $('.ahref').eq(i).attr('href',url)
                                    }
                                    }else{
                                        for (var i = 0; i < array.length; i++) {
                                        
                                        var url = $('.ahref').eq(i).attr('href').split('&P')[0]
                                        $('.ahref').eq(i).attr('href',url+'&PID='+$.cookie('myID'))
                                    }
                                    }
                
                
                 $(".card-box").each(function (i) {
                                    
                                    var $p = $("p", $(this)).eq(0);
                                     var divH = $(this).find('.text-gray').height();
                                     if(divH> 110){
                                         divH = 100
                                         $(this).find('.clickAll').before("<div  class='queryAll fs24'>点击查看全文</div>")
                                         while ($p.outerHeight() > divH) {
                                        
                                            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
                                            
                                        };
                                     }
                                     
                                    
                        
                                })
                                
                                
                                $('.queryAll').click(function(){
                                    $(this).prev('a').find('.text-gray').html($(this).prev('a').find('.text-gray').attr('data'))
                                    $(this).html('')
                                })
                
               

            }
        })
    }

    function dateTrans(date) {
        let _date = new Date(parseInt(date));
        let y = _date.getFullYear();
        let m = _date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = _date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = _date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = _date.getMinutes();
        let second = _date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute; second = second < 10 ? ('0' + second) : second;
        // console.log( y + '-' + m + '-' + d + ' ' + '　' + h + ':' + minute + ':' + second)
        let dates = y + '/' + m + '/' + d;

        return dates;
    }
    
     var uploadImages = {
    localId: [],
    serverId: []
  };
     
</script>
<script>

</script>
<style>
.weui-flex div{
    width: 32.3%;
    padding:5px 2px 5px 0;
}
.weui-flex div img{
    width: 90%;
    
}
.tximg{
    width: 0.533333rem;
    height: 0.533333rem;
    border-radius: 10px;
}

.button{
        display: inline-block;
    width: .6rem;
    background-color: #F65236;
    color: white;
    text-align: center;
    line-height: .3rem;
    border-radius: 15px;
    font-size: .16rem;
    margin-top: .1rem;
}
.queryAll{
    color:#F65236;
    text-align: right;
}
</style>
</body>
</html>